应用自定义渲染到 2D 节点

应用自定义渲染到 2D 节点，以创建后处理效果。例如，您可以将 2D 节点中的颜色图像转换为灰度。

要应用自定义渲染到 2D 节点，使用合成笔刷 (Composition Brush) 属性通过材质笔刷 (Material Brush) 在屏幕上合成节点，并启用力合成 (Force Composition) 属性。

要应用自定义渲染到 2D 节点：

创建您要应用自定义渲染的材质。
例如，要创建一个用于将颜色转换为灰度的材质：
1. 在素材库 (Library) 中，按下 Alt 并右键点击材质和纹理 (Materials and Textures) 并选择材质类型 (Material Type)。
  Kanzi Studio 创建材质类型以及使用该材质类型的材质。
2. 在素材库 (Library) > 材质和纹理 (Materials and Textures) > 材质类型 (Material Types) 中，展开您创建的材质类型，双击顶点着色器 (Vertex Shader) 以在着色器源编辑器 (Shader Source Editor) 中打开，将现有的着色器代码替换为代码，然后保存着色器。
```
attribute vec3 kzPosition;
attribute vec2 kzTextureCoordinate0;
uniform highp mat4 kzProjectionCameraWorldMatrix;

varying mediump vec2 vTexCoord;

void main()
{
    precision mediump float;
    vTexCoord = kzTextureCoordinate0;
    gl_Position = kzProjectionCameraWorldMatrix * vec4(kzPosition.xyz, 1.0);
}
```
3. 打开片段着色器 (Fragment Shader) 并将现有的着色器代码替换为这一步骤中的代码，然后保存着色器。
  在着色器中，使用以下 Kanzi 默认 uniform：
  - ContentTexture 以定义渲染节点在渲染时提供的纹理
  - RenderOpacity 以定义渲染节点的不透明度
  请参阅着色器 uniform。
```
uniform sampler2D ContentTexture;
varying mediump vec2 vTexCoord;
uniform lowp float RenderOpacity;

void main()
{
    precision mediump float;
    //使用此算法可以将 2D 节点使用的
    //纹理中的颜色转换为灰度。
    //要整合到 Kanzi 渲染管道，着色器必须输出
    //预乘阿尔法。
    vec4 color = texture2D(ContentTexture, vTexCoord);
    float grayscale = dot(color.rgb, vec3(0.21, 0.72, 0.07));
    float alpha = color.a * RenderOpacity;
    vec3 premultipliedColor = vec3(grayscale) * alpha;
    gl_FragColor = vec4(premultipliedColor, alpha);
}
```
在素材库 (Library) 按下 Alt 并右键点击材质和纹理 (Materials and Textures) 中，选择材质笔刷 (Material Brush)，并将其设置为使用您在上一步中创建的材质。
在工程 (Project) 中，创建或选择要对其应用您创建的材质的 2D 节点。
例如，创建一个 2D 堆栈布局 (Stack Layout 2D) 节点，并在 2D 堆栈布局 (Stack Layout 2D) 节点内创建一个图像 (Image) 节点。
在属性 (Properties) 中，添加：
- 合成笔刷 (Composition Brush) 为使用您要应用到该节点的材质的材质笔刷
- 力合成 (Force Composition) 为启用
- （可选）不透明度 (Opacity) 以控制节点的半透明度

另请参阅